<template>
	<view style="background: white;min-height: 100vh;">
		<view class="top-box">
			<uni-nav-bar leftIcon="left" title="搜索" statusBar :border="false" backgroundColor="#FFFFFF"
				@clickLeft="handleBack"></uni-nav-bar>
		</view>
		<view class="search-box">
			<image src="@/static/ic_search.png" mode="heightFix" />
			<input v-model="keyWord" placeholder="请输入关键字" @blur="getKeyWord" />
			<text class="searchBtn" @click.stop="handleSearch">搜索</text>
		</view>
		<view v-if="!projects?.length">
			<view class="hBox">
				<text class="ssjl">搜索记录</text>
				<view class="hView" @click="clearRecord">
					<image src="@/static/search/ic_qcjl.png" mode="heightFix" />
					<text class="qcjl">清除记录</text>
				</view>
			</view>
			<view class="historyList">
				<tagItem v-for="(item, index) in searchRecords" :key="index" :itemIndex="index" :itemData="item"
					@itemClick="handleSearchRecords" />
			</view>
		</view>

		<view v-else class="project-list">
			<projectItem v-for="(item, index) in projects" :key="index" :itemData="item" />
		</view>
	</view>
</template>
<script setup>
import {
	ref,
	reactive
} from 'vue'
import tagItem from './components/tagItem.vue'
import projectItem from '@/components/projectItem.vue'
import {
	getProjectList
} from '@/api/index.js'
import {
	onLoad,
	onReachBottom
} from '@dcloudio/uni-app'

const keyWord = ref()
const searchRecords = ref([])

const projects = ref([])

const searchData = reactive({
	name: '',
	page: 1,

});
onLoad(() => {
	let retrievedString = uni.getStorageSync('searchRecords');
	searchRecords.value = retrievedString ? JSON.parse(retrievedString) : [];
	console.log('onShow', searchRecords.value);
})

onReachBottom(() => {
	searchData.page += 1
	getData()
})

const getData = async () => {
	let res = await getProjectList(searchData)
	if (res?.code) {
		console.log(res.data);
		const tempList = res.data?.list || []
		if (searchData.page == 1) {
			projects.value = []
		}
		projects.value = projects.value.concat(tempList)

		if (!tempList.length) {
			uni.showToast({
				title: "搜索无结果"
			})
			if (searchData.page > 1) {
				searchData.page = searchData.page - 1

			}
		}
	} else {
		if (searchData.page > 1) {
			searchData.page = searchData.page - 1
		}
	}
}

const handleBack = () => {
	uni.navigateBack()
}
const getKeyWord = (e) => {
	keyWord.value = e.detail.value
}

const handleSearch = () => {
	if (keyWord.value) {
		let tempList = []
		if (searchRecords.value.length) {
			tempList = searchRecords.value.filter(item => item !== keyWord.value)
		}
		tempList.push(keyWord.value)
		searchRecords.value = tempList
		uni.setStorageSync("searchRecords", JSON.stringify(searchRecords.value))
	} else {
		projects.value = []
	}
	searchData.page = 1
	searchData.name = keyWord.value
	getData()
}
const handleSearchRecords = (value) => {
	keyWord.value = value
}

const clearRecord = () => {
	uni.removeStorageSync('searchRecords')
	searchRecords.value = []
}
</script>
<style lang="scss" scoped>
.top-box {
	position: sticky;
	top: 0;
}

.search-box {
	width: 710rpx;
	margin: 0 auto;
	height: 68rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	border: 2rpx solid #2462CB;
	display: flex;
	flex-direction: row;
	align-items: center;


	image {
		margin-left: 18rpx;
		width: 26rpx;
		height: 26rpx;
	}

	input {
		flex: 1;
		margin-left: 14rpx;
		font-size: 24rpx;
	}

	.searchBtn {
		width: 105rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		background: #2251A2;
		border-radius: 10rpx;
		margin-right: 6rpx;
		font-size: 24rpx;
		color: #FFFFFF;

		&:active {
			opacity: 0.7;
		}
	}

}

.project-list {
	margin-top: 20rpx;
	background: #f8f8f8;
	padding-bottom: 20rpx;
}

.hBox {
	width: 710rpx;
	margin: 49rpx auto 28rpx auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;

	.ssjl {
		font-size: 30rpx;
		color: #2C2C2C;
	}

	.hView {
		display: flex;
		flex-direction: row;
		align-items: center;

		&:active {
			opacity: 0.7;
		}

		image {
			height: 24rpx;
			width: 24rpx;
			display: block;
		}

		.qcjl {
			font-size: 26rpx;
			margin-left: 6rpx;
			color: #8D8D8D;
		}
	}
}

.historyList {
	width: 710rpx;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
</style>